<template>
	<view class="bg">
		<u-modal v-model="dcfkshow" :content="content" :show-cancel-button='true' @confirm="define"></u-modal>
		<u-toast ref="uToast" />
		<view class="sub_title_blue">督查详情</view>
		<view class="task_one">
			<view class="task_name">
				<view class="task_left">项目名称</view>
				<view class="task_right nameFont">{{dataObj.itemName}}</view>
			</view>
			<view class="task_child">
				<view class="task_test">
					<view class="task_left">督查事项详情</view>
					<view class="task_right childFont">{{dataObj.taskContent}}</view>
				</view>
				<view class="task_test">
					<view class="task_left">被督查经办人</view>
					<view class="task_right childFont">{{dataObj.taskResDeptOperator}}</view>
				</view>
				<view class="task_test">
					<view class="task_left">被督查责任人</view>
					<view class="task_right childFont">{{dataObj.taskResDeptResUser}}</view>
				</view>
				<view class="task_test">
					<view class="task_left">督查组</view>
					<view class="task_right childFont">{{dataObj.supervision}}</view>
				</view>
			</view>
		</view>
		<view class="sub_title_blue">督查反馈</view>
		<u-form :model="dcfkFrom" ref="uForm" :rules="rules" label-width="160" :label-style="{
        fontSize: '24rpx',
        fontFamily: 'PingFang SC',
        fontWeight: '400',
        color: '#272B32',
      }">
			<view class="item" v-if="role !== '2'&& role !== '3' && role !== '4'">
				<u-form-item label="督查方式" :required="true" prop="dcfs">
					<u-input type="select" v-model="dcfkFrom.dcfs" placeholder="请选择" @click='pick' />
				</u-form-item>
			</view>
			<view class="item">
				<u-form-item label="反馈描述" label-position="top" :required="true" prop="fkms">
					<u-input v-model="dcfkFrom.fkms" type="textarea" placeholder="请输入反馈描述" />
				</u-form-item>
			</view>
		</u-form>
		<view class="buttons">
			<view @click="cancel">取消</view>
			<view @click="submit">提交</view>
		</view>

		<u-picker v-model="show" mode="selector" :range="typeArr" @confirm="selectType"></u-picker>
	</view>
</template>

<script>
	import {
		dcrwFk,
		dczDcrwFk
	} from "@/request/zdxm.js"
	export default {
		data() {
			return {
				typeArr: ['现场督查', '整改通知书', '问责', '电话督查'],
				show: false,
				dcfkshow: false,
				content: '是否提交该督查反馈',
				id: null,
				role: uni.getStorageSync('role'),
				dataObj: {},
				rules: {
					dcfs: [{
						required: true,
						message: '请选择督查方式',
						trigger: ['change', 'blur'],
					}],
					fkms: [{
						required: true,
						message: '请输入反馈描述',
						trigger: ['change', 'blur'],
					}],
				},
				dcfkFrom: {
					dcfs: "",
					fkms: "",
				},
			};
		},
		onLoad(option) {
			this.dataObj = JSON.parse(option.item)
			this.id = option.id
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			selectType(e) {
				this.dcfkFrom.dcfs = this.typeArr[e[0]]
			},
			pick() {
				this.show = true
			},
			cancel(){
				uni.navigateBack({
				    delta: 1
				});
			},
			define(){
				if (this.role === '5') {
					dczDcrwFk({
							taskCode: this.id,
							taskSituation: this.dcfkFrom.fkms,
							urgeType: this.dcfkFrom.dcfs
						})
						.then((res) => {
							if (res.data.code === 200) {
								this.$refs.uToast.show({
									title: res.data.message,
									type: "success",
									duration: 1000,
								});
							}
						})
				} else {
					dcrwFk({
							taskCode: this.id,
							taskSituation: this.dcfkFrom.fkms
						})
						.then((res) => {
							if (res.data.code === 200) {
								this.$refs.uToast.show({
									title: res.data.message,
									type: "success",
									duration: 1000,
								});
							}
						})
				}
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.dcfkshow = true
					} else {
						console.log('验证失败');
					}
				});
			},
			toFkjl() {
				uni.navigateTo({
					url: "/pages/zdxm/details/dcfk/fkjl/index",
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.task_one {
		background-color: rgba(255, 255, 255, 1);
		padding: 24rpx;
		position: relative;
		margin-bottom: 40rpx;
		box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
		border-radius: 24rpx 8rpx 8rpx 8rpx;

		.line {
			width: 1rpx;
			height: calc(100% - 48rpx);
			// background-color: pink;
			position: absolute;
			left: 44rpx;
			top: 24rpx;
			border-left: 1rpx dashed rgba(48, 116, 255, 0.1);
			// z-index: 5;
		}

		.task_name {
			display: flex;
			padding-bottom: 40rpx;
		}

		.task_child {
			padding: 20rpx 0;
			border-top: 1rpx solid rgba(231, 233, 240, 1);
			border-bottom: 1rpx solid rgba(231, 233, 240, 1);
		}

		.task_test {
			display: flex;
			align-items: flex-start;
			margin: 20rpx 0;
		}

		.task_left {
			flex: 2.5;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8e9cb3;
		}

		.task_left3 {
			flex: 3.2;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8e9cb3;
		}

		.nameFont {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #272b32;
		}

		.task_right {
			flex: 7;
			display: flex;
			align-items: center;

			.childFont {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #272b32;
			}

			.zt_type1 {
				margin-left: 10rpx;
				background: #f85f78;
				border-radius: 4rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.zt_type2 {
				margin-left: 10rpx;
				background: rgba(250, 173, 51, 1);
				border-radius: 4rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	// .sub_title {
	// 	height: 95rpx;
	// 	line-height: 95rpx;
	// 	padding-left: 20rpx;
	// 	font-size: 28rpx;
	// 	font-family: PingFang SC;
	// 	font-weight: 500;
	// 	color: #3074ff;
	// 	margin: 0;
	// }

	.info {
		margin: 0 auto;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(48, 116, 255, 0.1);
		border-radius: 8rpx;
		padding: 0 24rpx;

		.info_item {
			display: flex;
			flex-flow: row nowrap;
			justify-content: flex-start;
			padding: 20rpx 0;

			view:nth-child(1) {
				width: 150rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
				display: flex;
				flex-flow: row nowrap;
				justify-content: center;
				align-items: center;
				padding: 0 20rpx;
			}

			view:nth-child(2) {
				flex: 1;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #272b32;
				display: flex;
				flex-flow: row nowrap;
				justify-content: flex-start;
				align-items: center;
				margin-left: 20rpx;
			}
		}

		.info_item_header {
			border-bottom: 1rpx solid rgba(231, 233, 240, 1);
			padding: 0;
		}
	}

	.item {
		width: 710rpx;
		margin: 0 auto;
		margin-bottom: 30rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(48, 116, 255, 0.1);
		border-radius: 8rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.buttons {
		width: 100%;
		height: 98rpx;
		line-height: 98rpx;
		text-align: center;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-content: center;
		position: fixed;
		bottom: 0;
		left: 0;

		view:nth-child(1) {
			flex: 1;
			background: #ffffff;
			border: 1rpx solid #e7e9f0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #8e9cb3;
		}

		view:nth-child(2) {
			flex: 1;
			background: #3074ff;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #fefefe;
		}
	}
</style>
